import { FC, useEffect, useState } from 'react'
import classnames from 'classnames'
import styles from './index.less'

type TabsType = {
  label: string;
  value: string | number;
}

interface Props{
  tabs: TabsType[]
  current: string | number
  onChange?: (current: TabsType) => void
}

const Index:FC<Props> = ({children, current, tabs, onChange}) => {
  const [active, setActive] = useState<string | number>()
  const onClick = (item) => {
    if(onChange){
      onChange(item)
    }else{
      setActive(item.value)
    }
  }
  useEffect(() => {
    setActive(current)
  }, [current])
  return <div className={styles.container}>
    <div className={styles.tabs}>
      {
        tabs.map(({label, value}) => <span onClick={() => onClick({label, value})} className={classnames({[styles.active]: active === value})} key={value}>{label}</span>)
      }
    </div>
    <div className={styles.content}>
      {children}
    </div>
  </div>
}

export default Index